<template>
  <div class="payment-page">
    <!-- 导航栏 -->
    <div class="nav-container">
      <div class="logo">
        <span class="logo-text">文创</span>
      </div>
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="/museum" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">分类</a>
        </li>
        <li class="nav-item">
          <router-link to="/myorders" class="nav-link">我的订单</router-link>
        </li>
        <li class="nav-item">
          <router-link v-if="!isLoggedIn()" to="/login" class="nav-link">登录</router-link>
          <router-link v-if="isLoggedIn()" to="/museum" class="nav-link" @click.prevent="logout">退出</router-link>
        </li>
      </ul>
    </div>

    <!-- 支付内容 -->
    <div class="payment-container">
      <div class="payment-header">
        <h1>订单支付</h1>
        <div class="order-info">
          <p>订单号：{{ orderNumber }}</p>
          <p>支付金额：<span class="amount">¥ {{ orderAmount.toFixed(2) }}</span></p>
        </div>
      </div>

      <div class="payment-content">
        <div class="payment-qrcode">
          <div class="qrcode-container">
            <!-- 这里可以使用实际的二维码生成库，这里用图片模拟 -->
            <div class="qrcode-image">
              <div class="qrcode-placeholder">
                <div class="qrcode-grid"></div>
              </div>
            </div>
            <p class="qrcode-tip">请使用{{ paymentMethod }}扫码支付</p>
          </div>
          <div class="payment-status">
            <div class="progress-bar">
              <div class="progress" :style="{ width: paymentProgress + '%' }"></div>
            </div>
            <p class="status-text">{{ paymentStatusText }}</p>
          </div>
        </div>

        <div class="payment-methods">
          <h3>选择支付方式</h3>
          <div class="method-options">
            <div 
              class="method-option" 
              :class="{ active: paymentMethod === '支付宝' }"
              @click="selectPaymentMethod('支付宝')"
            >
              <span class="method-icon alipay-icon">支</span>
              <span class="method-name">支付宝</span>
            </div>
            <div 
              class="method-option" 
              :class="{ active: paymentMethod === '微信' }"
              @click="selectPaymentMethod('微信')"
            >
              <span class="method-icon wechat-icon">微</span>
              <span class="method-name">微信支付</span>
            </div>
            <div 
              class="method-option" 
              :class="{ active: paymentMethod === '银行卡' }"
              @click="selectPaymentMethod('银行卡')"
            >
              <span class="method-icon bankcard-icon">卡</span>
              <span class="method-name">银行卡支付</span>
            </div>
          </div>
        </div>
      </div>

      <div class="payment-actions">
        <button class="confirm-payment" @click="confirmPayment">确认支付</button>
        <button class="cancel-payment" @click="cancelPayment">取消支付</button>
      </div>

      <div class="payment-tips">
        <h3>付款说明</h3>
        <ul>
          <li>请在30分钟内完成支付，超时订单将自动取消</li>
          <li>支付成功后，系统将自动为您处理订单</li>
          <li>如遇支付问题，请联系客服：400-123-4567</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as api from '@/assets/js/api.js';

const route = useRoute();
const router = useRouter();

// 获取订单号
const orderNumber = ref('');
const orderAmount = ref(0);
const paymentMethod = ref('支付宝'); // 默认支付方式
const paymentProgress = ref(0);
const paymentStatus = ref('waiting'); // waiting, processing, success, failed

// 支付状态文本
const paymentStatusText = computed(() => {
  switch (paymentStatus.value) {
    case 'waiting':
      return '等待支付...';
    case 'processing':
      return '支付处理中...';
    case 'success':
      return '支付成功！';
    case 'failed':
      return '支付失败，请重试';
    default:
      return '等待支付...';
  }
});

// 检查用户是否已登录
function isLoggedIn() {
  return localStorage.getItem('userId');
}

// 退出登录
async function logout() {
  try {
    const result = await api.out();
    if (result.data === "退出成功") {
      localStorage.clear();
      router.push('/login');
    }
  } catch (error) {
    console.error('退出失败:', error);
  }
}

// 选择支付方式
function selectPaymentMethod(method) {
  paymentMethod.value = method;
  // 重置支付进度
  paymentProgress.value = 0;
  paymentStatus.value = 'waiting';
}

// 确认支付
async function confirmPayment() {
  if (!isLoggedIn()) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }

  try {
    // 更新支付状态
    paymentStatus.value = 'processing';
    
    // 模拟支付进度
    const progressInterval = setInterval(() => {
      if (paymentProgress.value < 90) {
        paymentProgress.value += 10;
      } else {
        clearInterval(progressInterval);
      }
    }, 300);

    // 调用支付API
    const result = await api.payOrder(orderNumber.value, paymentMethod.value);
    
    // 清除进度条定时器
    clearInterval(progressInterval);
    
    if (result.code === 200) {
      // 支付成功
      paymentProgress.value = 100;
      paymentStatus.value = 'success';
      ElMessage.success('支付成功！');
      
      // 延迟跳转到订单页面
      setTimeout(() => {
        router.push('/myorders');
      }, 1500);
    } else {
      // 支付失败
      paymentProgress.value = 0;
      paymentStatus.value = 'failed';
      ElMessage.error('支付失败: ' + result.msg);
    }
  } catch (error) {
    console.error('支付过程出错:', error);
    paymentProgress.value = 0;
    paymentStatus.value = 'failed';
    ElMessage.error('支付失败，请稍后重试');
  }
}

// 取消支付
function cancelPayment() {
  ElMessage.info('已取消支付');
  router.push('/myorders');
}

// 页面加载时获取订单信息
onMounted(async () => {
  // 从URL获取订单号
  orderNumber.value = route.query.orderNumber;
  
  if (!orderNumber.value) {
    ElMessage.error('订单信息不完整，请返回重试');
    router.push('/shoppingcart');
    return;
  }
  
  try {
    // 获取订单详情
    const result = await api.getOrderById(orderNumber.value);
    if (result.code === 200 && result.data) {
      orderAmount.value = result.data.totalAmount || 0;
      // 如果订单已有支付方式，则使用该支付方式
      if (result.data.paymentMethod) {
        paymentMethod.value = result.data.paymentMethod;
      }
    } else {
      ElMessage.error('获取订单信息失败');
      router.push('/shoppingcart');
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    ElMessage.error('获取订单信息失败，请返回重试');
    router.push('/shoppingcart');
  }
});
</script>

<style>
/* 引入公共CSS文件 */
@import '../../assets/css/museum-product.css';

/* 支付页面样式 */
.payment-page {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.payment-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.payment-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.payment-header h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.order-info {
  font-size: 16px;
  color: #666;
}

.order-info .amount {
  font-size: 20px;
  color: #ff6700;
  font-weight: bold;
}

.payment-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.payment-qrcode {
  flex: 1;
  padding: 20px;
  text-align: center;
  border-right: 1px solid #eee;
}

.qrcode-container {
  margin-bottom: 20px;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin: 0 auto 15px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模拟二维码样式 */
.qrcode-placeholder {
  width: 180px;
  height: 180px;
  background-color: #fff;
  position: relative;
}

.qrcode-grid {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#000 1px, transparent 1px), 
                    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 10px 10px;
  position: relative;
}

.qrcode-grid:before, .qrcode-grid:after {
  content: '';
  position: absolute;
  background-color: #000;
}

.qrcode-grid:before {
  width: 60px;
  height: 60px;
  top: 20px;
  left: 20px;
  box-shadow: 100px 0 0 0 #000, 0 100px 0 0 #000;
}

.qrcode-grid:after {
  width: 20px;
  height: 20px;
  top: 40px;
  left: 40px;
  box-shadow: 100px 0 0 0 #000, 0 100px 0 0 #000, 100px 100px 0 0 #000;
}

.qrcode-tip {
  font-size: 14px;
  color: #666;
}

.payment-status {
  margin-top: 20px;
}

.progress-bar {
  height: 6px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress {
  height: 100%;
  background-color: #4caf50;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.status-text {
  font-size: 14px;
  color: #666;
}

.payment-methods {
  flex: 1;
  padding: 20px;
}

.payment-methods h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.method-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-option:hover {
  border-color: #ff6700;
  background-color: #fff9f5;
}

.method-option.active {
  border-color: #ff6700;
  background-color: #fff9f5;
  box-shadow: 0 0 0 1px #ff6700;
}

.method-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #fff;
  font-weight: bold;
}

.alipay-icon {
  background-color: #00a0e9;
}

.wechat-icon {
  background-color: #09bb07;
}

.bankcard-icon {
  background-color: #ff6700;
}

.method-name {
  font-size: 16px;
  white-space: nowrap;
}

.payment-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.confirm-payment, .cancel-payment {
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.confirm-payment {
  background-color: #ff6700;
  color: #fff;
}

.confirm-payment:hover {
  background-color: #f25807;
}

.cancel-payment {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-payment:hover {
  background-color: #e5e5e5;
}

.payment-tips {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}

.payment-tips h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.payment-tips ul {
  padding-left: 20px;
}

.payment-tips li {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .payment-content {
    flex-direction: column;
  }
  
  .payment-qrcode {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 20px;
  }
}
</style>